<template>
  <div class="depart-user-selector-wrapper">
    <div class="unit-selector-wrapper">
      <el-tree-select
          style="width: 100%"
          v-model="selectedUnit"
          :data="unitTree" default-expand-all
          check-strictly node-key="id"
          :props="defaultProps"
          @change="loadPositionLevelsByUnitId"
          :render-after-expand="false"
      />
    </div>
    <div class="depart-selector-wrapper" v-loading="loading">
      <FListV2 size="small" title-name="positionLevelName" @select="positionLevelSelect"
               v-loading="loading" searchPlaceholder="搜索岗位"
               :data-source="positionLevelList" :selectedKey="positionLevelSelectId"></FListV2>
    </div>
    <div class="user-list-selector-wrapper">
      <FListV2 size="small" title-name="realname"
               v-loading="loading" @doubleClick="addUser"
               :data-source="userList"></FListV2>
    </div>
  </div>
</template>
<script setup>
import {onMounted, shallowRef} from 'vue';
import {getAction} from '@/request/BaseRequest';
import {isEmpty, listToTrees, real} from '@/utils/CommonUtils';
import FListV2 from '@/components/FListV2/index.vue';

const positionLevelSelectId = shallowRef();
const refDepartTree = shallowRef();
const loading = shallowRef(false);
const unitTree = shallowRef([]);
const defaultProps = {
  children: 'children',
  label: 'unitName',
};
const props = defineProps({
  defaultUnitId: undefined,
});
const positionLevelList = shallowRef([]);
const userList = shallowRef([]);
const emits = defineEmits(['addUser']);
const selectedUnit = shallowRef();

onMounted(() => {
  loadUnitTree();
  positionLevelSelectId.value = undefined;
  selectedUnit.value = real(props.defaultUnitId);
  loadPositionLevelsByUnitId();
});

function addUser(user) {
  emits('addUser', {id: user.id, realname: user.realname});
}

function loadUnitTree() {
  getAction('/sys/unit/loadUnits').then(data => {
    if (data.success) {
      let result = data.result;
      setUnitTree(result);
    }
  });
}

function positionLevelSelect(position) {
  positionLevelSelectId.value = position.id;
  loadUserByPositionLevel();
}

function loadUserByPositionLevel() {
  let positionLevelId = positionLevelSelectId.value;
  let unitId = real(selectedUnit);

  loading.value = true;
  getAction('/sys/user/loadUsersByPositionLevelAndUnit',
      {positionLevelId, unitId}).then(data => {
    loading.value = false;
    if (data.success) {
      userList.value = data.result;
    }
  });
}

function setUnitTree(list) {
  if (isEmpty(list)) list = [];
  unitTree.value = listToTrees(list);
}

function loadPositionLevelsByUnitId() {
  loading.value = true;
  getAction('/sys/positionLevel/loadUsableUnitPositionLevel',
      {unitId: real(selectedUnit)}).then(data => {
    loading.value = false;
    if (data.success) {
      positionLevelList.value = data.result;
    }
  });
}


</script>
<script>
export default {
  name: 'PositionLevelUserSelector'
};
</script>
<style>
.user-list-selector-wrapper,
.depart-selector-wrapper {
  flex: 0.5;
  overflow: auto;
  position: relative;
}

.depart-user-selector-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.unit-selector-wrapper {
  background: #ecf5ff;
  padding: 5px;
  overflow: auto;
  height: 35px;
}

.user-list-padding {
  height: 20px;
  background: #f0f2f5;
}
</style>
